<template>
	<view class="content">
		<top-bar>
			<template #left>
				<image src="../../static/images/login/back.png" @tap="back" style="width: 44rpx;height: 44rpx;">
				</image>
			</template>
			<template #center>
				<text style="font-size: 40rpx;">名片</text>
			</template>
			<template #right>
				<view style="width: 38px;">
				</view>
			</template>
		</top-bar>
		<view class="container">
			<view class="main">
				<view class="main-top">
					<view class="top-avtor">
						<image :src="userDetail.imgrul" mode="aspectFill"></image>
					</view>
					<view class="top-explain">
						<view class="phone">
							电话:{{userDetail.phone}}
						</view>
						<view class="email">
							邮箱:{{userDetail.email}}
						</view>
						<view class="sigin">
							宣言:{{userDetail.explain}}
						</view>
					</view>
				</view>
				<view class="main-bottm">
					<view class="qrcode-box">
						<canvas id="qrcode" canvas-id="qrcode"
							:style="{width:2*qrcodeSize+'rpx',height:2*qrcodeSize+'rpx'}"></canvas>
					</view>
					<view class="text">
						长按保存二维码
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserDetailApi
	} from "../../api/userinfo/index.js"
	import TopBar from "../../components/top-bar/top-bar.vue"
	import {
		RuntimeServerUrl
	} from "../../commons/getRuntimeEnv.js"
	import uQRCode from "../../commons/uqrcode/uqrcode.js"
	export default {
		data() {
			return {
				userDetail: {},
				qrcodeSize: 150
			}
		},
		onLoad() {
			let userInfo = uni.getStorageSync("userInfo")
			if (!userInfo) {
				this.getUserInfo()
			} else {
				this.userDetail = userInfo
			}
			// 如果没有用户信息 则需要调用接口返回
			//没有二维码显示 则需要生成二维码 并且进行保存 
			//下次进入直接使用原来的二维码 不用再次生成
		},
		onReady() {
			// 获取uQRCode实例
			var qr = new uQRCode();
			// 设置二维码内容
			qr.data = this.userDetail._id;
			// 设置二维码大小，必须与canvas设置的宽高一致
			qr.size = this.qrcodeSize;
			// 调用制作二维码方法
			qr.make();
			// 获取canvas上下文
			var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
			// 设置uQRCode实例的canvas上下文
			qr.canvasContext = canvasContext;
			// 调用绘制方法将二维码图案绘制到canvas上
			qr.drawCanvas();
		},
		components: {
			TopBar
		},
		methods: {
			back() {
				uni.navigateBack()
			},
			//如果用户信息不存在 需要重新请求用户详情
			async getUserInfo() {
				let userid = uni.getStorageSync("userid")
				let {
					data
				} = await getUserDetailApi(userid)
				let userinfo = Object.assign(data.result, {
					imgrul: RuntimeServerUrl + data.result.imgrul
				})
				console.log(userinfo, "userinfo");
				uni.setStorageSync("userInfo", userinfo)
				this.userDetail = data.result
			}
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100vw;
		height: calc(100vh - var(--status-bar-height));
		margin-top: var(--status-bar-height);
		overflow: hidden;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		background-color: #79ebba;

	}

	.container {
		height: calc(100% - 88rpx);
		width: 90%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		margin-top: 88rpx;

		.main {
			height: 80%;
			width: 100%;
			flex-direction: column;
			display: flex;
			justify-content: center;
			align-items: center;

			.main-top {
				border-top-left-radius: 20rpx;
				border-top-right-radius: 20rpx;
				width: 85%;
				flex: 1;
				flex-direction: column;
				display: flex;
				justify-content: start;
				align-items: center;
				background-color: white;
				z-index: 9;

				.top-avtor {
					height: 200rpx;
					width: 200rpx;
					background-color: #41a4ff;
					border-radius: 50%;
					transform: translateY(-30%);

					image {
						width: 100%;
						height: 100%;
						border-radius: 50%;
					}
				}

				.top-explain {
					text-align: center;
					line-height: 50rpx;
					font-weight: bold;
					color: gray;
					font-size: 20rpx;
				}
			}

			.main-bottm {
				width: 95%;
				height: 60%;
				position: relative;
				display: flex;
				flex-direction: column;
				justify-content: end;
				align-items: center;
				background-color: #41a4ff;
				border-bottom-left-radius: 20rpx;
				border-bottom-right-radius: 20rpx;

				&::after {
					content: "";
					position: absolute;
					top: 0;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 60%;
					height: 30%;
					background-color: white;
					border-radius: 50%;
				}

				.qrcode-box {
					width: 300rpx;
					height: 300rpx;
				}

				.text {
					margin-bottom: 70rpx;
					margin-top: 20rpx;
					font-size: 28rpx;
					height: 40rpx;
					color: white;
					line-height: 40rpx;
				}
			}
		}
	}
</style>